<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/poser.css">
		<script src="./js/jquery-2.2.4.min.js"></script>
		<script src="./js/rem2.js"></script>
		<script src="./js/html2canvas.js"></script>
		<script src="./js/canvas2Image.js"></script>
		<script src="./js/qrcode.min.js"></script>
		<title>九嶷山云祭祀平台</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div class="save-wrapper">
			<div class="bg-img">
				<img id="bgImg" src="" alt="">
			</div>
			<div class="content-wrapper">
				<div class="num"></div>
				<div class="code">
					<!-- <img src="../poser/code.png" alt=""> -->
				</div>
			</div>
			<div class="other-wrapper">
				<span class="tips">(长按保存海报)</span>
				<div class="back-btn">
					<img id="backBtn" src="../activityOne/btn_2.png" alt="">
				</div>
			</div>
		</div>
		<!-- 背景音乐 -->
		<!-- <div id="bgmBtn" onclick="bgmBtnClick()"></div>
		<audio id="bgmAudio" src="http://a.yuncjs.cn/videos/20200422/15875663979HklFt.mp3" preload="" loop=""></audio>
		<script src="./js/common.js"></script> -->
		<script>
			var PATHAPI = "http://a.yuncjs.cn";
			// 海报类型切换图片及内容
			var urlPath = "";  // 统计数地址
			var bgPath = "";  // 背景图地址
			var btnPath = "";   // 返回按钮地址
			var num = 0;  // 用于判断背景图和内容是否加载完，才可以生成海报
			var action = GetQueryString("action") || '';
			var type = (GetQueryString("type") || 1) / 1;  // 海报页面类型
			var $content = $(".content-wrapper");   // 动态内容容器
			var $other = $(".other-wrapper");  // 返回按钮及提示容器
			switch (type) {
				// 敬礼
				case 1:
					$content.addClass("poser-one");
					$(".tips").css("color", "rgba(255,255,255,1)");
					urlPath = "/activityRank?action=" + type;
					bgPath = "/getImg?page_no=activity1&page_type=action1_poster_background_img";
					btnPath = "/getImg?page_no=activity1&page_type=action1_poster_btn";
					break;
				// 点灯
				case 2:
					$content.addClass("poser-one");
					$(".tips").css("color", "rgba(255,255,255,0.8)");
					urlPath = "/activityRank?action=" + type;
					bgPath = "/getImg?page_no=activity1&page_type=action2_poster_background_img";
					btnPath = "/getImg?page_no=activity1&page_type=action2_poster_btn";
					break;
				// 献花
				case 3:
					$content.addClass("poser-one");
					urlPath = "/activityRank?action=" + type;
					// $content.css("top", "36%");
					$(".tips").css("color", "rgba(255,255,255,0.8)");
					bgPath = "/getImg?page_no=activity1&page_type=action3_poster_background_img";
					btnPath = "/getImg?page_no=activity1&page_type=action3_poster_btn";
					break;
				// 祭祖
				case 4:
					$content.addClass("poser-two");
					urlPath = "/feteRank?action=" + action;
					$other.addClass("poser-two");
					bgPath = "/getImg?page_no=activity2&page_type=poster_background_img";
					btnPath = "/getImg?page_no=activity2&page_type=poster_btn_bottom";
					break;
			}
			// 生成二维码
			setqrcode();
			$("#bgImg").attr("src", PATHAPI + bgPath).show();
			$("#bgImg").load(function() {
				num++;
				setImg();
			})
			
			// 请求统计数据
			$.ajax({
				type: "GET",
				headers: {
					Token: localStorage.getItem('token')
				},
				contentType: "application/json;charset=UTF-8",
				url: PATHAPI + urlPath,
				success: function(result) {
					$(".num").html( (result.data.text || "").replace(/[\r\n]/g,"<br/>") );   // 回车键替换成换行标签
					num++;
					setImg();
				}
			})
			
			// 设置返回按钮图片，返回选择页
			$("#backBtn").attr("src", PATHAPI + btnPath);
			$(".back-btn").on("click", function() {
				window.open(window.location.protocol + "//" + window.location.host + "/#/pages/home/homeNav");
			});
			
			// 动态设置二维码
			function setqrcode() {
				var qrcode = new QRCode($(".code")[0], {
					width : 72,
					height : 72
				});
				var urlPath = window.location.protocol + "//" + window.location.host;
				qrcode.makeCode(urlPath);
				$content.show();
			}
			
			// 触发生成图片的事件
			function setImg() {
				// 统计数、背景图加载完之后才触发，<2表示没加载完
				if(num < 2 ) {
					return false;
				}
				saveImg();
			}
			
			// 生成合并的图片
			function saveImg() {
				console.log(222)
				$(".other-wrapper").hide();
				var cntElem = $('.save-wrapper')[0]; // 需要转为图片的容器
				var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
				var width = shareContent.offsetWidth; //获取dom 宽度
				var height = shareContent.offsetHeight; //获取dom 高度
				var canvas = document.createElement("canvas"); //创建一个canvas节点
				var scale = 2; //定义任意放大倍数 支持小数
				canvas.width = width * scale; //定义canvas 宽度 * 缩放
				canvas.height = height * scale; //定义canvas高度 *缩放
				canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
				var opts = {
					useCORS: true,
					scale: scale, // 添加的scale 参数
					canvas: canvas, //自定义 canvas
					// logging: true, //日志开关，便于查看html2canvas的内部执行流程
					width: width, //dom 原始宽度
					height: height,
					useCORS: true // 【重要】开启跨域配置
				};
				html2canvas(shareContent, opts).then(function(canvas) {
					var context = canvas.getContext('2d');
					// 【重要】关闭抗锯齿
					context.mozImageSmoothingEnabled = false;
					context.webkitImageSmoothingEnabled = false;
					context.msImageSmoothingEnabled = false;
					context.imageSmoothingEnabled = false;
					// 【重要】默认转化的格式为png,也可设置为其他格式
					var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
					document.body.appendChild(img);
					$(".other-wrapper").show();
					$(img).css({
						"width": canvas.width / 2 + "px",
						"height": canvas.height / 2 + "px",
						"position": "absolute",
						"top": "0",
						"left": "0",
						"opacity": "1",
						"z-index": 222
					}).addClass('f-full').on("click", function() {
						// $(this).remove();   // 不移除
					});
				});
			}
			
			// 获取url的参数
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}
		</script>
	</body>

</html>
